<template>
    <div class="table-database-vue" style="    position: relative; margin-top: 103px;">
        <el-card style="margin: 10px" shadow="never">
            <div slot="header" class="clearfix">库信息</div>
            <el-form label-width="100px" style="width: 700px">
                <el-form-item label="数据源：" style="float: left">{{
                    vueQueryParam.host
                    }}</el-form-item>
                <el-form-item label="数据库：" style="margin-left: 70%">{{
                    vueQueryParam.dbName
                    }}</el-form-item>
            </el-form>
            <el-form :inline="true" label-width="100px">
                <el-form-item label="关键字：">
                    <el-input
                            v-model="keyword"
                            placeholder="输入字段名或注释搜索相关的表或字段信息"
                            style="width: 500px"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="search-submit"
                            type="primary"
                            icon="el-icon-search"
                            @click="searchSubmit"
                    >模糊搜索</el-button
                    >
                </el-form-item>
                <div style="margin-left: 35px; width: 700px">
                    <el-checkbox style="margin-left: 10%" v-model="searchTable"
                    >按表名查询</el-checkbox
                    >
                    <el-checkbox style="margin-left: 5%" v-model="searchColumn"
                    >按字段查询</el-checkbox
                    >
                </div>
            </el-form>
        </el-card>
        <div style="padding: 10px" v-loading="columnListLoading">
            <el-table
                    :highlight-current-row="true"
                    :stripe="true"
                    :header-cell-style="{'text-align':'center','background-color': '#F1F1F1','color': '#333333','font-weight': 'bold'}"
                    :cell-style="{'text-align':'left','margin-left': '30%'}"
                    :data="columnList"
                    align="center"
                    style="width: 70%; margin-bottom: 5px"
                    class="tableSearch"
            >
                <el-table-column
                        prop="tableName"
                        align="left"
                        label="表名"
                        width="300"
                        :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                        prop="columnName"
                        label="字段名"
                        align="left"
                        width="300"
                        :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                        prop="columnType"
                        label="字段类型"
                        align="left"
                        width="200"
                        :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                        prop="description"
                        align="left"
                        label="注释"
                        width="300"
                        :show-overflow-tooltip="true"
                ></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import datasourceApi from '../../common/api/datasource'

    export default {
        props: [
            "queryData"
        ],
        data () {
            return {
                columnListLoading: false,
                vueQueryParam: {},
                columnList: [],
                tableInfo: [],
                keyword: '',
                searchTable: true,
                searchColumn: true
            };
        },
        mounted: function () {
            console.info(this.queryData)
            // 延迟设置展开的目录，edit比app先初始化
         this.vueQueryParam=this.queryData;
        },
        activated: function () {
            this.initQueryParam(this.$route);
        },
        methods: {
            tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0) {
                    return 'background-color: #F1F1F1;color: #333333;font-weight: bold;'
                }
            },
            initQueryParam (to) {
                let newName = { key: this.$route.fullPath, val: '库-' + this.vueQueryParam.dbName };
                this.$store.commit('global/addTableName', newName);
            },
            searchSubmit () {
                if(this.searchTable == false && this.searchColumn == false) {
                    this.$message.warning("查询类型至少选中一个")
                    return false
                }
                this.columnListLoading = true;
                this.vueQueryParam.searchText = this.keyword;
                this.vueQueryParam.searchTable = this.searchTable;
                this.vueQueryParam.searchColumn = this.searchColumn;
                datasourceApi.tableAndColumnBySearch(this.vueQueryParam).then(json => {
                    this.columnList = json.data || [];
                    this.columnListLoading = false;
                });
            },
        }
    }
</script>
<style>
    .table-database-vue .el-table td,
    .table-database-vue .el-table th {
        padding: 5px 0;
    }
    .el-form-item {
        margin-bottom: 10px;
    }
    .tableSearch div table tbody tr td div{
        margin-left: 20%;
    }
</style>

